<template>
  <div class="page_link_com">
    <div class="header_back_page" @click="backPage">
      <van-icon name="arrow-left" />返回
    </div>
    <div class="link_com_warp">
      <div class="link_mem_type">请您选择会员类型</div>
      <ul class="link_w2_ul">
        <li
          v-for="itemMember in memberList"
          :key="itemMember.id"
          :class="{rechargeActive: defaultIndex === itemMember.id}"
          class="link_w2_li"
          @click="selectRechargeMoney(itemMember.id,itemMember.money1)"
        >
          <div class="link_recharge_money"><span class="link_recharge_money_count">{{ itemMember.money }}</span>元</div>
          <div class="link_itemMember_desc">{{ itemMember.desc }}</div>
        </li>
        <div class="link_make_sure_recharge" @click="makeSureSubmit">确认开通</div>
        <div class="recharge_agree">充值即代表同意 <span class="recharge_agree_page">《充值协议》</span> </div>

      </ul>

    </div>
  </div>
</template>

<script>
export default {
  name: 'Member',
  components: {
  },
  data() {
    return {
      defaultIndex: -1,
      memberList: [
        { id: 0, money: 28, desc: '月度会员' },
        { id: 1, money: 88, desc: '季度会员' },
        { id: 2, money: 188, desc: '年度会员' },
        { id: 3, money: 888, desc: '终身会员' },
      ],
    }
  },
  computed: {},
  create() {
  },
  mounted() {
  },
  methods: {
    backPage() {
      this.$router.back(-1)
    },
    selectRechargeMoney(id, value) {
      this.defaultIndex = id
    },
    makeSureSubmit() {
      if (this.defaultIndex === -1) {
        this.$toast('请选择会员类型')
        return false
      } else {
        this.$toast('请等待,')
      }
    },
  },
}
</script>

<style scoped lang="scss">
  @import "../../assets/style/base";
  .page_link_com{
    .header_back_page{
      padding: pxTorem(15px) 0 pxTorem(15px) pxTorem(20px);
      font-size: pxTorem(32px);
      display: flex;
      align-items: center;
      background-color: #ffffff;
      color: #000000;
      border-bottom: 1px solid #999999;
    }
    .link_com_warp{
      .link_mem_type{
        font-size: pxTorem(34px);
        text-align: center;
        margin: pxTorem(30px) auto;
      }
      .link_w2_ul{
        display: flex;
        padding: pxTorem(30px) pxTorem(40px) pxTorem(0px) pxTorem(40px);
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: pxTorem(20px);
        .link_w2_li{
          width: pxTorem(280px);
          text-align: center;
          border: 1px solid #999999;
          padding: pxTorem(21px) 0;
          margin-bottom: pxTorem(40px);
          font-size: pxTorem(28px);
          border-radius: pxTorem(8px);
          position: relative;
          .link_recharge_money{
            .link_recharge_money_count{
              font-size: pxTorem(40px);
            }
          }
        }
        .rechargeActive{
          background-color: #ffcc00;
          color: #f9f9f9;
        }

      }
      .link_make_sure_recharge{
        width: pxTorem(650px);
        margin:pxTorem(20px) auto;
        height: pxTorem(80px);
        line-height: pxTorem(80px);
        text-align: center;
        font-size: pxTorem(34px);
        color: #ffffff;
        background-color: #e98f36;
        border-radius: pxTorem(8px);
      }
      .recharge_agree{
        width: pxTorem(400px);
        margin: pxTorem(10px) auto;
        font-size: pxTorem(28px);
        color: #666666;
        .recharge_agree_page{
          color: #999999;
        }
      }
    }

  }
</style>
